<template>
  <div class="">
    <!-- {{editercomlist}} -->
    <div class="fwwcc">组件列表</div>
    <div class="fcl">
      <div v-for="(item, index) in editercomlist" class="fwwcc" style="padding: 3px;">
        <el-button
          style="width: 150px;"
          :type="item.active ? 'primary' : 'info'"
          size="default"
          @click="clickactive(item, index)"
          >{{ item.name }}</el-button
        >
      </div>
    </div>
    <!-- {{editercomlist}} -->
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState({ editercomlist: (state) => state.editer.editercomlist }),
  },
  watch: {},
  mounted() {},
  methods: {
    clickactive(item, i) {
      this.$store.state.editer.editercomlist.map((item1) => {
        item1.active = false;
      });
      this.$store.state.editer.editercomlist[i].active = true;
    },
  },
};
</script>
<style lang='scss' scoped>
</style>